<template>
	<view class="container">
		<u-navbar autoBack placeholder @leftClick="$emit('close')" @rightClick="search" rightText="搜索" bgColor="#FFF">
			<view class="center" slot="center">
				<my-search
				  :tapLeft="tapLeft"
				  :tapRight="search"
				  :change="change"
					:search="search"
					:clickInput="change"
					focus
				>
				</my-search>
			</view>
		    </u-navbar>
		

		<view class="card-show">
    <!-- history -->
    <SearchHistory :searchHistories="searchHistories" @onClickDelHistory="onClickDelHistory" @onSearch="searchKeywords" @delAll="removeAllHistory" v-if="isHistory" />
    <!-- hot_search -->
    <HotSearch :hotSearchResList="hotSearchResList" @onSearch="searchKeywords"  v-if="isSearch"/>
    <!-- 联想建议 -->
    <SearchAdvice :searchResList="searchResList" :keyword="keyword" @onSearch="searchKeywords" v-if="isLxjy"/>
    <!-- 搜索结果 -->
    <!-- <view class="search-result" v-if="isSearchList">
      <ArticleItem :config="config" :data="articleList"/>
    </view> -->
  </view>

	</view>
</template>

<script>
import SearchHistory from '@/pages/search/components/search-history.vue'
import HotSearch from '@/pages/search/components/hot-search.vue'
import SearchAdvice from '@/pages/search/components/search-advice.vue'
	export default {
		data() {
			return {
				keyword: '',
				searchHistories: [
				{
                "id": 69,
                "user_id": 2,
                "number": 20,
                "keywords": "测试",
                "createdAt": "2022-11-15 18:17:30",
                "updatedAt": "2022-11-16 18:36:18",
                "deletedAt": null
            },
            {
                "id": 68,
                "user_id": 2,
                "number": 19,
                "keywords": "vue",
                "createdAt": "2022-11-15 17:58:27",
                "updatedAt": "2022-11-16 17:56:53",
                "deletedAt": null
            },
            {
                "id": 70,
                "user_id": 2,
                "number": 1,
                "keywords": "hh",
                "createdAt": "2022-11-16 10:32:23",
                "updatedAt": "2022-11-16 10:32:23",
                "deletedAt": null
            }
				], // 搜索历史的数据
				hotSearchResList:[
				{
                "id": 69,
                "user_id": 2,
                "number": 20,
                "keywords": "测试",
                "createdAt": "2022-11-15 18:17:30",
                "updatedAt": "2022-11-16 18:36:18",
                "deletedAt": null
            },
            {
                "id": 68,
                "user_id": 2,
                "number": 19,
                "keywords": "vue",
                "createdAt": "2022-11-15 17:58:27",
                "updatedAt": "2022-11-16 17:56:53",
                "deletedAt": null
            },
            {
                "id": 70,
                "user_id": 2,
                "number": 1,
                "keywords": "hh",
                "createdAt": "2022-11-16 10:32:23",
                "updatedAt": "2022-11-16 10:32:23",
                "deletedAt": null
            },
            {
                "id": 71,
                "user_id": 221,
                "number": 1,
                "keywords": "vue",
                "createdAt": "2023-03-21 16:43:51",
                "updatedAt": "2023-03-21 16:43:51",
                "deletedAt": null
            }
				],
				searchResList: [
        '11月8号红月亮月全食',
        '163邮箱登录',
        '1美元兑换多少人民币',
        '1g等于多少mg',
        '1升等于多少毫升',
        '192.1681.1',
        '192.168.0.1 登陆页面',
        '126邮箱',
        '163邮箱',
        '12生肖排序'

      ], // 联想建议数据
			};
		},
		components: { HotSearch,SearchHistory,SearchAdvice },
		computed:{
			isHistory () {
      // return !this.keyword && this.searchHistories.length
			return false
    },
			isSearch () {
      // return !this.keyword && this.hotSearchResList.length
			return false
    },
		isLxjy () {
      // return this.keyword && this.searchResList.length && !this.articleList
      return true
    },
		},
		methods: {
			tapLeft() {
				uni.navigateBack()
    },
		change(e){
			console.log('change',e);
			this.keyword = e
		},
		search(){
			console.log(this.keyword);
		},
		searchKeywords(keyword){
			console.log(keyword);
		},
		onClickDelHistory(id){
			console.log('id',id);
		},
		removeAllHistory(){

		},
		},
	}
</script>

<style lang="scss">
.container{
	padding: 5px 10px 0px 10px;
}
/deep/.center{
		width: 75%;
		// flex: 2;
	}
</style>
